<template>
  <div class="min-h serveProject bg-wt">
    <div class="baseList">
      <div class="tableBoxs">
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-table :row-key="rowKey" :data="data" :columns="COLUMNS" vertical-align="middle" :hover="hover"
          :loading="dataLoading" tabel-content-width="100%" table-layout="fixed">
          <!-- 序号 -->
          <template #rowIndex="{ rowIndex }">
            {{
              (pagination.pageNum - 1) * pagination.pageSize + (rowIndex + 1)
            }}
          </template>
          <!-- 图片预览 -->
          <template #image="{ row }">
            <div>
              <div class="tdesign-demo-image-viewer__base">
                <t-image-viewer :images="[row.image]">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image">
                      <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                      <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                        <span>
                          <BrowseIcon size="1.4em" /> 预览
                        </span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </div>
            </div>
          </template>
          <!-- 价格拼接 -->
          <template #price="{ row }">
            {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
          </template>

          <!-- 按钮处理 -->
          <template #op="{ row }">
            <div class="operateCon">
              <a class="btn-dl">删除</a>
              <a class="font-bt">编辑</a>
              <a class="delete">禁用</a>
            </div>
          </template>
        </t-table>
        <!-- 分页 -->
        <t-pagination v-if="total > 1" v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize"
          :total="total" @change="onPageChange">
        </t-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue';
import { COLUMNS } from './constants'
import { getProjectList } from '@/api/serve'

const data = ref([]);
const total = ref(0);
const dataLoading = ref(false) // 加载中

const pagination = ref({
  pageSize: 2,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})

//调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  return false;
}

</script>